import QtQuick 1.0

Item {
    id: numDial
    width: 32
    height: 60

    Rectangle {
        anchors.fill: parent
        color: "transparent"
        border.width: 2
        border.color: "red"
        radius: 15
    }

    Component {
        id: numDelegate
        Item {
            width: numDial.width
            height: numDial.height/3
            Text {
                anchors.centerIn: parent
                horizontalAlignment: Text.Center
                verticalAlignment: Text.Center
                text: index
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.debug("Number dial clicked")

                    // Show number input dialog
                }
            }
        }

    }

    Component {
        id: highlightDelegate
        Rectangle {
            width: numDial.width
            height: numDial.height/3
            color: "black"
            opacity: 0.2
            visible: PathView.onPath
        }

    }

    PathView {
        id: numsPathView
        smooth: true
        clip: true
        anchors.fill: parent
        model: 10
        delegate: numDelegate
        highlight: highlightDelegate
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        highlightRangeMode: PathView.StrictlyEnforceRange
        pathItemCount: 3
        path: Path {
            startX: numDial.width/2; startY: 0
            PathLine { x: numDial.width/2; y: numDial.height }
        }
    }
}
